<script setup lang="ts">
import {ChannelItem} from "../types/data"
import {onMounted,ref,defineProps,defineEmits} from "vue"
import {getChannelsAPI} from "../api/channel"
// 响应式数据
// 频道列表数据
const channelsList=ref<ChannelItem[]>([])

// prop
const props= defineProps<{channelId:number}>()

//emit
const emits=defineEmits<{
  // 频道切换事件
  (e:'changeChannel',id:number):void
}>()

// 钩子函数
onMounted(async ()=>{
 const res= await getChannelsAPI()
 channelsList.value=res.data?.channels
})
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{active: props.channelId === item.id}"
        href="javascript:;"
        v-for="(item) in channelsList"
        :key="item.id"
        @click="emits('changeChannel',item.id)"
      >
        {{item.name}}
      </a>
    </nav>
  </div>
</template>